<script setup>
import hotUrl from "@/components/hotUrl.vue";
import { useRoute } from "vue-router";
const route = useRoute();
import { ElMessage } from "element-plus";
import { ref, onMounted } from "vue";
import axios from "axios";
onMounted(async () => {
  let { data } = await axios.get("http://localhost:3000/urlList");
  itemData.value = data.find((item) => item.id == route.query.id);
  let userId = localStorage.getItem("userId");
  let res = await axios.get("http://localhost:3000/userLike");
  let flag = res.data.findIndex(
    (item) => item.urlId == itemData.value.id && item.userId == userId
  );
  console.log(flag);
  if (flag > -1) {
    isLiek.value = true;
  } else {
    isLiek.value = false;
  }

  //去重
  const i = data.findIndex((item) => item.id == itemData.value.id);
  data.splice(i, 1);

  relatedNav.value = data.filter((item) => item.parent == itemData.value.parent);
  // console.log(relatedNav.value);
  for (let i = 0; i < 6; i++) {
    let rIndex = Math.floor(Math.random() * relatedNav.value.length);
    rNav.value.push(relatedNav.value.splice(rIndex, 1)[0]);
  }
  for (let i = 0; i < 8; i++) {
    let datas = data;
    let rIndex = Math.floor(Math.random() * datas.length);
    hotArr.value.push(datas.splice(rIndex, 1)[0]);
    // console.log(hotArr.value);
  }
});
const itemData = ref([]);
const isLiek = ref(null);
const relatedNav = ref([]);
const rNav = ref([]);
const hotArr = ref([]);
const isLiekFn = async () => {
  let userId = localStorage.getItem("userId");
  if (userId) {
    let { data } = await axios.get("http://localhost:3000/userLike");
    if (isLiek.value) {
      isLiek.value = false;
      // console.log("qx");
      let index = data.find(
        (item) => item.urlId == itemData.value.id && item.userId == userId
      );

      if (index) {
        console.log(index)
        await axios.delete(`http://localhost:3000/userLike/${index.id}`);
        ElMessage.success("取消成功");
      }
      console.log(index);
    } else {
      await axios.post("http://localhost:3000/userLike", {
        urlId: itemData.value.id,
        name: itemData.value.name,
        img: itemData.value.img,
        url:itemData.value.url,
        type: itemData.value.type,
        parent: itemData.value.parent,
        label: itemData.value.label,
        briefly: itemData.value.briefly,
        userId: userId,
      });
      ElMessage.success("收藏成功");
      isLiek.value = true;
      // console.log("sc");
    }
  } else {
    ElMessage.error("请先登录哦~");
  }
};
const goPage = (url) => {
  window.open(url, "_blank");
};
const goMain = (id) => {
  console.log(id);
  window.open(`/main?id=${id}`, "_blank");
};
</script>

<template>
  <div class="main">
    <div class="bg">
      <div :class="`bg${item}`" v-for="item in 8" :key="item"></div>
    </div>

    <div class="content">
      <div class="left">
        <div class="shoucang">
          <i
            class="iconfont"
            :class="isLiek ? 'icon-shoucang1' : 'icon-shoucang'"
            @click="isLiekFn"
          ></i>
        </div>

        <div class="iconBox">
          <img class="bottomIcon" :src="itemData.img" />
          <img class="icon" :src="itemData.img" alt="" />
        </div>
      </div>
      <div class="right">
        <h2>{{ itemData.name }}</h2>
        <p>{{ itemData.briefly }}</p>
        <span>标签：{{ itemData.label }}</span>
        <div @click="goPage(itemData.url)">
          <span>链接直达</span>
          <i class="iconfont icon-shouqixiangyou14"></i>
        </div>
      </div>
    </div>

    <div class="hot">
      <hotUrl :hotArr="hotArr"></hotUrl>
    </div>

    <div class="relatedLink">
      <div class="headText">
        <i class="iconfont icon-biaoqian"></i>
        <h3>相关导航</h3>
      </div>
      <ul class="labels">
        <li v-for="item in rNav" :key="item.id" @click="goMain(item.id)">
          <img :src="item.img" alt="" />
          <div class="items">
            <span>{{ item.name }}</span>
            <p>{{ item.briefly }}</p>
          </div>
          <i class="iconfont icon-yuanjiantou"></i>
        </li>
      </ul>
    </div>
  </div>
</template>

<style scoped>
@import url("/src/assets/style/Main/main.scss");
</style>
